<template>
  <TitleCard :title="titleCard" :showMore="showMore">
    <div class="backStack-table-wrap">
      <div class="head-top-wrap">
        <div class="form-table-wrap">
          <Form
            ref="form"
            layoutType="grid"
            :optionList="formRow"
            :defaultModel="defaultValue"
          ></Form>
          <div class="operation-wrap">
            <a-button @click="clearAll">清空条件</a-button>
            <a-button @click="toSearch">搜索</a-button>
          </div>
        </div>
        <TableToolsWrap
          needLeft
          :btnList="utilsBtnList"
          @utilsClick="handlerActionClick"
        ></TableToolsWrap>
      </div>
      <Table
        ref="table"
        :options="fields"
        :tableValue="tableValue"
        :customSlotOpt="slotOpt"
        :otherOpt="customOtherOpt"
        @change="initTableValue"
        @actionClick="handlerActionClick"
      ></Table>
    </div>
    <AModal ref="modal" :customOpt="customModalOpt" @ok="handlerOk"></AModal>
  </TitleCard>
</template>

<script>
import Table from '../../components/table/index.vue'
import Form from '../../components/formTable/form.vue'
import AModal from '../../components/AModal'
import TableToolsWrap from '../../components/common/tableToolsWrap.vue'
import mixinsBackStack from '@/views/backstageSupport/mixins'
import { fields, slotOpt, formRow } from './configs/configs'
import { getAccountList, deleteAccount } from '@/api/accountInfos.js'

export default {
  mixins: [mixinsBackStack],
  data() {
    return {
      slotOpt,
      fields,
      formRow,
      customOtherOpt: {
        pagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10
        }
      },
      tableValue: [],
      defaultSearchParam: {},
      defaultValue: {},
      utilsBtnList: [
        { name: '删除', cb: 'batchDelete' },
        // { name: '重置密码', cb: 'batchResetPsw' },
      ]
    }
  },
  components: {
    Table,
    Form,
    AModal,
    TableToolsWrap
  },
  mounted() {
    this.initSearchParams() // 重置搜索的参数
    this.initTableValue()
  },
  methods: {
    async initTableValue() {
      try {
        this.loadingTable(true) // 开启表格的加载动画
        const { searchParam, pageParam } = this.handlerBeforeRequestParams()
        const { rows, total } = await getAccountList(pageParam, searchParam) // 请求表格数据接口
        const row = this.handlerDateFormat(rows) // 处理时间格式
        this.handlerResultMappings(rows) // 处理数据的映射关系
        this.tableValue = row
        this.customOtherOpt.pagination.total = total
        this.initSelectedRowIds() // 清空勾选的选项
      } catch (error) {
        this.$apiStatusHandler(99, error.msg) // 请求异常，则全局轻提示
      } finally {
        this.loadingTable(false)
      }
    },
    // 请求前的参数收集
    handlerBeforeRequestParams() {
      const { pagination } = this.$refs.table
      const { pageSize, pageNum } = pagination
      const params = {
        searchParam: {
          ...this.searchParam
        },
        pageParam: {
          pageNum,
          pageSize
        }
      }
      return params
    },
    // 前往详情
    toDetail(row) {
      const { id, userType } = row.scope
      this.$router.push({
        name: 'accountInfosOperation',
        query: { type: 'detail', id, userType }
      })
    },
    // 编辑
    edit(row) {
      this.$router.push({
        name: 'accountInfosOperation',
        query: { type: 'edit', id: row.id, userType: row.userType }
      })
    },
    // 单独删除
    singleDelete(row) {
      this.customModalOpt.contentTips = '是否确定删除该用户'
      this.beforeShowModal(true, {
        source: 'dealDeleteApi',
        params: { ids: row.id }
      })
    },
    // 批量删除
    batchDelete() {
      const tableRef = this.$refs.table
      const selectedIds = tableRef.selectedRowIds
      const idstatus = selectedIds.map(item => item.id)
      this.customModalOpt.contentTips = '是否确定删除已选的用户信息'
      if (selectedIds.length === 0) {
        return this.$apiStatusHandler(999, '您还未选中需要操作的用户信息')
      }
      this.beforeShowModal(true, {
        source: 'dealDeleteApi',
        params: { ids: idstatus }
      })
    },
    // 调用删除接口
    async dealDeleteApi(params) {
      const { ids } = params
      try {
        const { msg, code } = await deleteAccount(ids)
        this.initTableValue()
        this.$apiStatusHandler(code, msg)
      } catch (error) {
        this.$apiStatusHandler(99, error.msg)
      }
    },
    // 批量重置密码
    // batchResetPsw() {
    //   const tableRef = this.$refs.table
    //   const selectedIds = tableRef.selectedRowIds
    //   const idstatus = selectedIds.map(item => item.id)
    //   this.customModalOpt.contentTips = '重置用户密码后，用户密码将更改为系统生成的新密码，并通过用户的联系邮箱发生密码重置通知！'
    //   this.customModalOpt.title = '确定重置用户密码吗？'
    //   if (selectedIds.length === 0) {
    //     return this.$apiStatusHandler(999, '您还未选中需要操作的用户信息')
    //   }
    //   this.beforeShowModal(true, {
    //     source: 'dealResetApi',
    //     params: { ids: idstatus }
    //   })
    // },
    // 调用重置接口
    // async dealResetApi(params) {
    //   // const { ids } = params
    //   try {
    //     // const { msg, code } = await deleteInformationInfos(ids)
    //     // this.initTableValue()
    //     // this.$apiStatusHandler(code, msg)
    //   } catch (error) {
    //     this.$apiStatusHandler(99, error.msg)
    //   }
    // },
  }
}
</script>
